<template>
	<view>
		<view class="Modal_mask" @click.stop="closes"></view>
		<view class="Modal_Modal">
			<view class="Modal_title">
				<text class="no" @click.stop="closes">取消</text>
				<text class="one">确认{{ way }}</text>
				<text class="yes" @click="$goPage('c2cTrade/c2cTrade')">确认</text>
			</view>
			<view class="explain">由于市场行情波动，价格可能会发生变化，请尽快下单及时锁定价格</view>
			<view class="a_block">
				<view class="left">
					<text>付款方式</text>
					<text>参考单价</text>
					<text>数量</text>
					<text>总金额</text>
				</view>
				<view class="right">
					<text>支付宝</text>
					<text>7.45 CNY/USDT</text>
					<text>13.42 USDT</text>
					<text class="blue">100.00 CNY</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniIcons from '@/components/uni-icon/uni-icon.vue';
export default {
	name: 'trade-modal',
	components: { uniIcons },
	props: {
		way: {
			type: String
		},
		allPrice: {
			type: Number
		},
	},
	data() {
		return {
			type: 'price'
		};
	},
	methods: {
		hideModal() {
			if (this.isMask) {
				this.$emit('close');
			}
		},
		closes() {
			this.$emit('close');
		}
	}
};
</script>

<style lang="scss">
.Modal_mask {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 9993;
}
.Modal_Modal {
	position: fixed;
	z-index: 9999;
	bottom: 0;
	width: 100%;
	background: #fff;
	box-shadow: 0px 0px 2rpx 0px rgba(0, 0, 0, 0.54);
	.Modal_title {
		padding: 24rpx 40rpx;
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		.no {
			font-weight: bold;
			color: #c5cfd5;
		}
		.one {
			font-size: 36rpx;
			font-weight: bold;
		}
		.yes {
			font-weight: bold;
			color: $blue;
		}
	}
	.explain {
		height: 20px;
		background: rgba(24, 130, 212, 0.1);
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20rpx;
		color: $blue;
		font-weight: bold;
	}
	.price {
		font-size: 24rpx;
		color: #a4a4a4;
		margin-left: 44rpx;
		margin-bottom: 44rpx;
		margin-top: 12rpx;
	}
	.select {
		display: flex;
		align-items: center;
		justify-content: space-around;
		border-bottom: 1px solid #e5e5e5;
		.one {
			font-size: 28rpx;
			color: #000;
			padding-bottom: 10rpx;
			&.active {
				color: #488fd3;
				position: relative;
				display: flex;
				justify-content: center;
				&:after {
					content: '';
					position: absolute;
					bottom: -2rpx;
					background: #488fd3;
					height: 4rpx;
					width: 78rpx;
					border-radius: 2rpx;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}
	}
	.a_block {
		display: flex;
		justify-content: space-between;
		padding:56rpx 24rpx 114rpx;
		.left,.right {
			text {
				font-size: 32rpx;
				font-weight: bold;
				display: block;
				margin-bottom: 26rpx;
			}
		}
		.left {
			text {
				color: #C5CFD5;
			}
		}
		.right {
			text {
				text-align: right;
			}
		}
		.blue {
			color: $blue;
		}
	}
}
</style>
